<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>联系我们</title>
	<link rel="stylesheet" href="fonts/glyphicons/css/glyphicons.css">
	<link rel="stylesheet" href="fonts/font-awesome/css/font-awesome.min.css">
	<link rel="stylesheet" href="css/style.css">
	<link rel="stylesheet" href="css/contact.css">
	<link rel="stylesheet" href="css/carousel.css">
</head>
<body>
	<div id="header">
		<div id="top-nav">
			<div class="wrapper">
				<div id="search-box">
					<span class="glyphicon glyphicon-search"></span>
				</div>
				<div id="top-menu">
					<ul>
						<li class="follow-us">关注我们</li>
						<li class="share"><a href="#"><span class="icon icon-facebook"></span></a></li>
						<li class="share"><a href="#"><span class="icon icon-twitter"></span></a></li>
						<li class="share"><a href="#"><span class="icon icon-youtube"></span></a></li>
						<li class="share"><a href="#"><span class="icon icon-google-plus"></span></a></li>
						<li class="btn login">
							<a href="#">
								<span class="glyphicon glyphicon-lock"></span>
								登录
							</a>
						</li> 
						<li class="btn register">
							<a href="#">
								<span class="glyphicon glyphicon-user"></span> 
								注册
							</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<div id="nav">
			<div class="wrapper">
				<h1 class="logo">网上商城</h1>
				<ul class="nav-menu">
					<li class="selected"><a href="index.html">首页</a></li>
					<li><a href="about.html">关于我们</a></li>
					<li class="menu-btn">
						<a href="#">商城 <span class="arrow"></span></a>
						<ul class="sub-menu">
							<li><a href="catalog.html">商品类别</a></li>
							<li><a href="product.html">商品详情</a></li>
							<li><a href="shopcart.html">购物车</a></li>
						</ul>
					</li>
					<li class="menu-btn"><a href="#">博客 <span class="arrow"></span></a>
					<ul class="sub-menu">
							<li><a href="posts.html">Blog Posts</a></li>
							<li><a href="timeline.html">Blog Timeline</a></li>
						</ul>
					</li>
					<li><a href="contact.html">联系我们</a></li>
				</ul>
			</div>
		</div>
	</div>
	<div class="zhan"></div>
	<div id="center" class="wrapper">
		<img src="img/map/map.jpg" alt="地图" class="map">
		<h2 class="title">
			<span class="glyphicon glyphicon-map-marker"></span>
			Contact
		</h2>
		<div class="message">
			<div class="send">
				<form action="">
					<input type="text" class="name" name="name" placeholder="YOUR NAME">
					<input type="text" class="phone" name="phone" placeholder="PHONE"><br>
					<textarea name="message" class="text" rows="5" placeholder="YOUR MESSAGE"></textarea>
					<button><span class="glyphicon glyphicon-envelope"></span>Send message</button>
				</form>
			</div>
			<div class="business">
				<h4>John Doe</h4>
				<h5>Business manager at Business</h5>
				<p><abbr title="Work email">e-mail:</abbr><a href="#"> john.doe@mybiz.com</a></p>
				<p><abbr title="Work Phone">phone:</abbr> (012) 345-678-901</p>
				<p><abbr title="Work Fax">fax:</abbr> (012) 678-132-901</p>
				<br>
				<br>
				<h5>You can also find us:</h5>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tristique rutrum libero, vel bibendum nunc consectetur sed.</p>
			</div>
			<div class="clear"></div>
		</div>
		<div class="important">
			<h5 class="important-note">
				<span class="glyphicon glyphicon-warning-sign"></span>
				Important note
			</h5>
			<p class="text">
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi erat massa, ultricies sit amet <a href="#">mattis vitae</a>, lacinia in quam. Nullam nec congue odio. Aenean tincidunt commodo urna, et pulvinar arcu varius sed. Quisque ullamcorper arcu sit amet justo dapibus, eget suscipit sapien egestas. Proin lobortis nibh non risus mollis, sed mattis orci imperdiet. <a href="#">Donec sit amet</a> tincidunt tellus. Etiam ut faucibus nisi. Mauris elit justo, pretium ultrices quam vitae, ultrices scelerisque tellus. Sed quis ullamcorper libero. Etiam blandit faucibus nulla sit amet gravida.
			</p>
		</div>
	</div>
	<div id="footer">
		<div class="wrapper">
			<div class="foot-top">
				<div class="quick-links left">
					<h4>QUICK LINKS</h4>
					<ul>
						<li><a>Home</a></li>
						<li><a>About</a></li>
						<li><a>pricing</a></li>
						<li><a>Blog</a></li>
						<li><a>Contact</a></li>
					</ul>
				</div>
				<div class="about left">
					<h4>ABOUT</h4>
					<p>Lorem Ipsum is simply dummy text of the printing and typesetting dustry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
				</div>
				<div class="out-blog left">
					<h4>OUR BLOG</h4>
					<ul>
						<li><a>What is Lorem Ipsum?</a></li>
						<li><a>What is Lorem Ipsum?</a></li>
						<li><a>What is Lorem Ipsum?</a></li>
						<li><a>What is Lorem Ipsum?</a></li>
						<li><a>What is Lorem Ipsum?</a></li>
					</ul>
				</div>
				<div class="contact right">
					<h4>CONTACT</h4>
					<ul>
						<li><span class="glyphicon glyphicon-phone"></span>01&nbsp230&nbsp1958</li>
						<li><span class="glyphicon glyphicon-envelope"></span>contact@mosaicpro.biz</li>
					</ul>
				</div>
				<div class="social right">
					<h4>SOCIAL</h4>
					<ul>
						<li><a href="#" class="icon icon-facebook-sign selected"></a></li>
						<li><a href="#" class="icon icon-twitter-sign"></a></li>
						<li><a href="#" class="icon icon-linkedin-sign"></a></li>
						<li><a href="#" class="icon icon-google-plus-sign"></a></li>
						<li><a href="#" class="icon icon-edit-sign"></a></li>
					</ul>
				</div>
				<div class="clearfix"></div>
			</div>
			<div class="copyright">
				<span>© 2013 -</span>
				<a href="#"> mosaicpro.biz</a>
				<span class="text-right">FLAT KIT</span>
			</div>
		</div>
	</div>
</body>
</html>